<template>
	<wsPage title="商户运费模板">
		<div slot="page_operate">
			<Button type="ghost" @click="query"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">

			<!-- <div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="申请状态">
							<Select clearable v-model="queryForm.type" placeholder="请选择" class="ws-form-select">
									<Option value="1">包邮</Option>
									<Option value="2">满足金额包邮</Option>
									<Option value="3">固定运费</Option>									
							</Select>
					</FormItem>
				</Form>
			</div> -->
			<div slot="list_operate">
				<Button type="ghost"  @click="addModalShow">新增模板</Button>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--模板弹框-->
		<wsModal v-model="templateModal.show" ok-text="提交" :title="modalTitle + '模板'" @on-ok="templateModalOk" @on-cancel="templateModalCancel">
		    <Form ref="templateForm" :model="templateModal.form" :rules="templateModal.validate" :label-width="100">
				<FormItem label="模板类型" prop="type">
		            <Select clearable v-model="templateModal.form.type" placeholder="请选择" >
		                <!-- <Option value=1>包邮</Option> -->
		                <Option value=2>满足金额包邮</Option>
		                <Option value=3>固定运费</Option>
		            </Select>
		        </FormItem>
				<FormItem label="满多少" prop="satisfyAmount" v-if="templateModal.form.type=='2'">
		            <Input v-model="templateModal.form.satisfyAmount"></Input>
		        </FormItem>
				<FormItem label="不满运费" prop="freight" v-if="templateModal.form.type=='2'">
		            <Input v-model="templateModal.form.freight" ></Input>
		        </FormItem>
		        <FormItem label="固定运费" prop="freight" v-if="templateModal.form.type=='3'">
		            <Input v-model="templateModal.form.freight"></Input>
		        </FormItem>
				
		    </Form>
		</wsModal>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				queryForm: {
					type: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '编号',
						key: 'id',
	          			width: 100,
	          			align: 'center'
					},
					{
						title: '模板类型',
						key: 'type',
	          			// width: 160,
	          			align: 'center',
						render: (h, params) => {
							return h('span',{

							},this.checkType(params.row.type))
						}
					},
					{
						title: '运费',
						key: 'freight',
	          			// width: 100,
	          			align: 'center'
					},
					{
						title: '模板消费金额',
						key: 'satisfyAmount',
	         			// width: 200,
	          			align: 'center'
					},
					{
						title: '创建人',
						key: 'userName',
	          			// width: 160,
	          			align: 'center'
					},
					{
						title: '添加日期',
						key: 'createDate',
	          			// width: 200,
	          			align: 'center'
					},
					{
						title: '操作',
						width: 200,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							 if(params.row.type != 1){
								return h('div', [h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											this.templateModal.form.orderRefundId = params.row.id;
											this.templateModal.show = true;
											this.queryTemplate(params.row.id);
										}
									}
								}, '编辑'),h('Button',{
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.deleteReminder(params.row.id);
									}
								}
							}, '删除')])
							}
						}
						}],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				//模板弹框
				templateModal: {
					show: false,
					form: {
						id:'',
						type: '',
						freight: '',
						satisfyAmount: '',
						createDate:'',
						// updateDate:'',
					},
					validate: {
						type: [
	                       		{ required: true, message: '请选择模板类型', trigger: 'blur' }
	                    	]}
				}
			}
		},
		computed: {
			 /**
			 * 模态框标题
			 */
		    modalTitle(){
		    	let modalTitle = Util.vad.isBlank(this.templateModal.form.id)?'新增':'编辑';
		    	return modalTitle;	
		    },

		},
		mounted() {
			this.init();
		},
		methods: {
			addModalShow(){
				this.templateModal.show = true;
				this.templateModal.form.id = '';
				this.templateModal.form.type = '';
				this.templateModal.form.satisfyAmount = '';
				this.templateModal.form.freight = '';
				this.templateModal.form.createDate = '';
				// this.templateModal.from.updateDate = '';
			},
			/**
			 * 判断模板类型
			 */
			checkType(type){
				if(type == 1) return '包邮';
				if(type == 2) return '满足金额包邮';
				if(type == 3) return '固定运费';
			},

			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/merchantFreightTemplates?pageSize=' + pageSize + '&pageNum=' + pageNum, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 模板的弹框取消操作
			 */
			templateModalCancel() {
				this.$refs['templateForm'].resetFields();
				this.addModalShow();
				this.templateModal.show = false;
			},
			/**
			 * 模板的弹框确认操作
			 */
			templateModalOk() {	
				this.$refs['templateForm'].validate((valid) => {
					if (valid) {
						if(this.templateModal.form.id == '' || this.templateModal.form.id == undefined){
							this.saveTemplate();
						}else{
							this.updateTemplate(this.templateModal.form.id);

						}
			        } else {
            		this.$Message.error('请完善信息!');
       				}
               });
			},
			/**
			 * 新增模板
			 */
			saveTemplate(){
				const _this = this;
				if(_this.templateModal.form.type==2){
						if(null == _this.templateModal.form.satisfyAmount || _this.templateModal.form.satisfyAmount=="" || _this.templateModal.form.satisfyAmount<=0 || !(/^\+?[1-9]\d*$/).test(_this.templateModal.form.satisfyAmount)){
									this.$Message.warning('请输入正数');
									return;
							}
						if(null == _this.templateModal.form.freight || _this.templateModal.form.freight=="" ||  _this.templateModal.form.freight<=0 || !(/^\+?[1-9]\d*$/).test(_this.templateModal.form.freight)){
							this.$Message.warning('请输入正数');
							return;
						}
				}
				if(_this.templateModal.form.type==3){
					if(null == _this.templateModal.form.freight || _this.templateModal.form.freight=="" || _this.templateModal.form.freight<=0 ||
					 !(/^\+?[1-9]\d*$/).test(_this.templateModal.form.freight)){
						this.$Message.warning('请输入正数');
						return;
					}
					
				}
				this.axios.post('/ws/ms/merchantFreightTemplate', _this.templateModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增失败:' + message_);
					}
					_this.$refs['templateForm'].resetFields();
					_this.addModalShow();
					_this.templateModal.show = false;
					_this.init();
				});
			},

			//删除提示
			deleteReminder(id) {
        		const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗? 删除不影响订单！',
        			onOk: function() {
        				_this.deleteTemplate(id);
        			}
        		});		
			},

			//删除模板
			deleteTemplate(id){
				const _this = this;
				this.axios.delete('/ws/ms/merchantFreightTemplates/' + id ).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除商品失败:' + message_);
					}	
			    });				
			},

			//根据id查询模板
			queryTemplate(id){
				const _this = this;
				this.axios.get('/ws/ms/merchantFreightTemplates/' + id ).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.templateModal.form = res.data;
						_this.templateModal.form.type = res.data.type.toString();
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('查询失败:' + message_);
					}
				});
			},

			//修改模板
			updateTemplate(id){
				const _this = this;
				if(_this.templateModal.form.type==2){
						if(null == _this.templateModal.form.satisfyAmount || _this.templateModal.form.satisfyAmount=="" || _this.templateModal.form.satisfyAmount<=0 || !(/^\+?[1-9]\d*$/).test(_this.templateModal.form.satisfyAmount)){
									this.$Message.warning('请输入正数');
									return;
							}
						if(null == _this.templateModal.form.freight || _this.templateModal.form.freight=="" ||  _this.templateModal.form.freight<=0 || !(/^\+?[1-9]\d*$/).test(_this.templateModal.form.freight)){
							this.$Message.warning('请输入正数');
							return;
						}
				}
				if(_this.templateModal.form.type==3){
					if(null == _this.templateModal.form.freight || _this.templateModal.form.freight=="" || _this.templateModal.form.freight<=0 ||
					 !(/^\+?[1-9]\d*$/).test(_this.templateModal.form.freight)){
						this.$Message.warning('请输入正数');
						return;
					}
					
				}
				this.axios.put('/ws/ms/merchantFreightTemplates' , _this.templateModal.form).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('修改失败:' + message_);
					}
					_this.$refs['templateForm'].resetFields();
					_this.addModalShow();
					_this.templateModal.show = false;
					_this.init();
				});
				
			}


		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
